//找到edit（+-的名字）元素
let edit = document.getElementsByClassName('edit')
//遍历它的元素
for (let i = 0; i < edit.length; i++) {
    //eadit[i]的点击事件
    edit[i].onclick = function () {
        //获得单价,this指edit[i]
        //price是edit的父元素的上一个元素的内容
        let price = this.parentNode.previousElementSibling.innerHTML
        //转换成数值型，并截取
        price = parseFloat(price.substring(1))
        //获得- + 属性的值
        let op = this.getAttribute('data-op')
        //num是- + 中间的数字
        let num
        if (op === '+') {
            //num, +的上一个元素，找到它，并改变
            num = parseInt(this.previousElementSibling.innerHTML)
            num++
            this.previousElementSibling.innerHTML = num
        } else if (op === '-') {
            //num,-的下一个元素
            num = parseInt(this.nextElementSibling.innerHTML)
            num--
            //判断num是不是大于0
            if (num === 0) {
                alert('商品数量必须大于0')
                num = 1
            }
            //重新赋值给num
            this.nextElementSibling.innerHTML = num
        }
        //单行总价，保留一位小数
        let sumprice = '$' + (num * price).toFixed(1)
        //sumprice是edit父元素的下一个元素找到并改变
        this.parentNode.nextElementSibling.innerHTML = sumprice
        calcNums()
        calcPrice()
        fn()
    }

}
//实现全选全不选
function selectAll() {
    //找到all
    let all = document.getElementsByClassName('all')
    //遍历，给每个all绑定一个change事件
    for (let i = 0; i < all.length; i++) {
        //给每个all[i]绑定onchange事件
        all[i].onchange = function () {
            //flag等于all选中状态
            let flag = all[i].checked
            //找到所有的名字为select的checkbox
            let select = document.getElementsByClassName('select')
            //遍历所有select
            for (let j = 0; j < select.length; j++) {
                //all[i]选中时赋值select[j]选中
                select[j].checked = flag
            }
            calcNums()
            calcPrice()
            fn()
        }
    }
}
selectAll()

/**
 * 描述 计算商品的总数
 * @date 2020-09-23
 * @returns {any}
 */
function calcNums() {
    //找到商品数量
    let goodsNum = document.getElementsByClassName('goods-num')
    let sum = 0
    //遍历goodsNum
    for (let i = 0; i < goodsNum.length; i++) {
        //找到goodsNum父级的父级
        let parent = goodsNum[i].parentNode.parentNode
        //目标为父元素的第一个元素的第一个元素中的checked
        let target = parent.firstElementChild.firstElementChild.checked
        //如果目标为选中状态，num等于goodsNum[i]转换为数值型进行相加
        if (target) {
            let num = parseInt(goodsNum[i].innerHTML)
            sum += num
        }
    }
    //把累加的数字写到元素中
    //找到购买总数
    let target = document.querySelector('.goods-nums>span')
    //赋值给购买总数
    target.innerHTML = sum
}
calcNums()

/**
 * 描述 计算总价
 * @date 2020-09-23
 * @returns {any}
 */
function calcPrice() {
    //找到购买商品总价
    let goodsPrice = document.querySelector('#goods-sum-price')
    //找到商品单行总价
    let price = document.getElementsByClassName('sum-price')
    let sum = 0
    for (let i = 0; i < price.length; i++) {
        //单行总价的父元素
        let parent = price[i].parentNode
        //目标为单行总价父元素的第一个元素的第一个元素的选中状态
        let target = parent.firstElementChild.firstElementChild.checked
        //如果目标为选中状态
        if (target) {
            //str获取price[i]内容
            let str = price[i].innerHTML
            //str转换成数值型，并截取
            str = parseFloat(str.substring(1))
            //总价为单行总价相加
            sum += str
        }
    }
    //sum赋值给goodsPrice,保留一位小数
    goodsPrice.innerHTML = sum.toFixed(1)
}
/**
 * 描述 当所有select全部选中时，all才选中，否则不选中
 * @date 2020-09-23
 * @returns {any}
 */
function selectReverse() {
    //找到select
    let select = document.getElementsByClassName('select')
    //找到all
    let all = document.getElementsByClassName('all')
    //遍历select
    for (let j = 0; j < select.length; j++) {
        //select[j]点击事件
        select[j].onclick = function () {
            //flag=true 说明所有的select都是选中状态
            let flag = true
            //遍历select，如果有一个为false就跳出循环，flag为false
            for (let i = 0; i < select.length; i++) {
                if (select[i].checked === false) {
                    flag = false
                    break
                }
            }
            //遍历all
            for (let i = 0; i < all.length; i++) {
                //flag赋值给all[i]
                all[i].checked = flag
            }
            calcNums()
            calcPrice()
            fn()
        }
    }
}
selectReverse()
/**
 * 描述 结算功能
 * 序号 名称 单价 数量 小计
 * 1    *** **** ***  ***
 * 2    *** **** ***  ***
 * 3    *** **** ***  ***
 * 4    *** **** ***  ***
 * 购物总数：4
 * 购物总金额：1000
 * 商品折扣：150
 * 应支付：850
 * @date 2020-09-23
 * @returns {any}
 */
function buy() {
    //名称
    let arrName = document.getElementsByClassName('goods-name')
    //单价
    let arrPrice = document.getElementsByClassName('price-wrap')
    //数量
    let arrNum = document.getElementsByClassName('goods-num')
    //小计
    let arrSumPrice = document.getElementsByClassName('sum-price')
    //商品的总数量
    let totalNum = document.querySelector('.goods-nums>span').innerHTML
    //商品的总价格
    let totalPrice = document.querySelector('#goods-sum-price').innerHTML
    let str = `<table width="50%">`
    str += `<tr>
        <th>序号</th><th>名称</th><th>单价</th><th>数量</th><th>小计</th>
      </tr>`
    for (let i = 0; i < arrName.length; i++) {
        let tr = `<tr>
        <td>${i + 1}</td>
        <td>${arrName[i].innerHTML}</td>
        <td>${arrPrice[i].innerHTML}</td>
        <td>${arrNum[i].innerHTML}</td>
        <td>${arrSumPrice[i].innerHTML}</td>
      </tr>`
        str += tr
    }
    str += `<tr><td colspan="5">购物总数：${totalNum}</td></tr>`
    str += `<tr><td colspan="5">购物总金额：${totalPrice}</td></tr>`
    str += `<tr><td colspan="5">商品折扣：${totalPrice * 0.15}</td></tr>`
    str += `<tr><td colspan="5">应支付：${totalPrice * 0.85}</td></tr>`
    str += '</table>'
    let buy = document.getElementsByClassName('buy-info')[0]
    buy.style.display = 'block'
    buy.innerHTML = str
}

function fn() {
    let Delete = document.querySelectorAll('.delete')
    let App = document.querySelector('#app')
    let goodsWrap = document.querySelector('.goods-wrap')
    for (let i = 0; i < Delete.length; i++) {
        Delete[i].onclick = function () {
            App.removeChild(goodsWrap)
        }
    }

}
fn()